<script type="text/javascript">

    var usr_rendererOptions = {
	  draggable: false
    };
    var usr_directionsDisplay = new google.maps.DirectionsRenderer(usr_rendererOptions);
    var usr_directionsService = new google.maps.DirectionsService();
    var usr_map;
    
    var srilanka = new google.maps.LatLng(7.0000, 81.0000);
	var usr_orig = '';
	var usr_dest = '';
	var usr_data = {};

    function initializeUserMap(origin, destination) {
		
      var mapOptions = {
        zoom: 8,
        center: srilanka
      };

      usr_map = new google.maps.Map(document.getElementById('usr-map-canvas'), mapOptions);
      usr_directionsDisplay.setMap(usr_map);
      usr_directionsDisplay.setPanel(document.getElementById('usr-directionsPanel'));
    
      google.maps.event.addListener(usr_directionsDisplay, 'directions_changed', function() {
        usr_computeTotalDistance(usr_directionsDisplay.getDirections());
      });
  
      usr_calcRoute();

    }
	
	function loadUserRoute(desiredRoute)
	{	
		if (desiredRoute != "") {
			console.log("Desired Route : " + desiredRoute);
			var os = eval('(' + desiredRoute + ')');
			console.log("os : " + os);
			var wp = [];
			for(var i=0;i<os.waypoints.length;i++)
				wp[i] = {'location': new google.maps.LatLng(os.waypoints[i][0], os.waypoints[i][1]),'stopover':false }
				 
			directionsService.route({'origin':new google.maps.LatLng(os.start.lat,os.start.lng),
			'destination':new google.maps.LatLng(os.end.lat,os.end.lng),
			'waypoints': wp,
			'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
				if(sts=='OK')usr_directionsDisplay.setDirections(res);
			}) 
		}

	}

    function usr_calcRoute() {
      var request = {
        origin: usr_orig,
        destination: usr_dest,
        travelMode: google.maps.TravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          usr_directionsDisplay.setDirections(response);
        }
      });
    }
    
    function usr_computeTotalDistance(result) {
      var total = 0;
      var myroute = result.routes[0];
      for (var i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
      }
      total = total / 1000.
      document.getElementById('total').innerHTML = total + ' km';
    }
    
</script>

<div id="usr-map-canvas"  style="width:100%; height:400px;"></div>
<div id="usr-directions"  style="width:100%; height:400px; overflow:auto;">
    <div id="usr-directionsPanel">
        <p>Total Distance: <span id="total"></span></p>
    </div>
</div>
<div style="float:left">
    <div id="usr-div-show-directions" style="float:left;"><input type="button" id="usr-show-directions" value="Show Directions"/></div>
    <div id="usr-div-hide-directions" style="float:left;"><input type="button" id="usr-hide-directions" value="Hide Directions"/></div>
    <div id="usr-div-hide-map" style="float:left;"><input type="button" id="usr-hide-map" value="Hide Map"/></div>
</div>


<script>
    $(function(){
        $("#usr-directions").hide();
		$("#usr-div-hide-directions").hide();
    });
    
    $("#usr-show-directions").bind('click', function(){
        $("#usr-directions").show();
		$("#usr-map-canvas").hide();
		$("#usr-div-hide-directions").show();
		$("#usr-div-show-directions").hide();
    });
    
    $("#usr-hide-directions").bind('click', function(){
        $("#usr-directions").hide();
		$("#usr-map-canvas").show();
		$("#usr-div-hide-directions").hide();
		$("#usr-div-show-directions").show();
		
    });
	
	$("#usr-hide-map").bind('click', function(){
		$("#div-desired-map-panel").hide();
    });

</script>

